<template>
	<view class="bg_login">
		<image class="bg_img" src="/static/images/home/register.png"></image>
		<view class="hh_cicle">
			<image class="hc_img" src="/static/images/home/login.png"></image>
			<text class="login_txt">{{registerType == 'register'?'欢迎注册智初小交':'请绑定手机'}}</text>
		</view>
		<view class="login_box">
			<view class="form_box">
				<image src="/static/images/home/iphone.png" class="img_size"></image>
				<input type="text" maxlength="11" placeholder-class="account-txt" class="uni-input"
					v-model="params.mobileNo" placeholder="请输入您的手机号" @blur="checkNo(params.mobileNo)" />
			</view>
			<view class="form_box">
				<image src="/static/images/home/password.png" class="img_size"></image>
				<view class="register_yzm">
					<input type="number" placeholder-class="account-txt" v-model="params.smsCode"
						class="uni-input input_yzm" placeholder="输入短信验证码" />
				</view>
				<view @click="getCode" :class="{disabled: disabled}" class="register_yzms">
					{{countdown}} <text v-if="timestatus">秒重获</text>
				</view>
			</view>
			<view class="form_box" v-if="registerType == 'register'">
				<image src="/static/images/home/pass.png" class="img_size"></image>
				<view class="pwd-view input_view">
					<input v-if="showPassword" class="uni-input" type="text" placeholder-class="account-txt"
						v-model="params.pwd" placeholder="请设置您的密码" />
					<!-- #ifdef MP-ALIPAY -->
					<input v-if="!showPassword" class="uni-input" password placeholder-class="account-txt"
						v-model="params.pwd" placeholder="请设置您的密码" />
					<!-- #endif -->
					<!-- #ifndef MP-ALIPAY -->
					<input v-if="!showPassword" class="uni-input" type="password" placeholder-class="account-txt"
						v-model="params.pwd" placeholder="请设置您的密码" />
					<!-- #endif -->
					<image @click="showPass"
						:src="showPassword ? '/static/images/home/eye_icon.png' : '/static/images/home/eye-open.png'"
						style="width: 18px;height: 18px;"></image>
				</view>
			</view>
			<view class="form_box" v-if="registerType == 'register'">
				<image src="/static/images/home/pass1.png" class="img_size"></image>
				<view class="pwd-view input_view">
					<input v-if="showPassword1" class="uni-input" type="text" placeholder-class="account-txt"
						v-model="params.rePwd" placeholder="请确认您的密码" />
					<!-- #ifdef MP-ALIPAY -->
					<input v-if="!showPassword1" class="uni-input" password placeholder-class="account-txt"
						v-model="params.rePwd" placeholder="请确认您的密码" />
					<!-- #endif -->
					<!-- #ifndef MP-ALIPAY -->
					<input v-if="!showPassword1" class="uni-input" type="password" placeholder-class="account-txt"
						v-model="params.rePwd" placeholder="请确认您的密码" />
					<!-- #endif -->
					<image @click="showPass1"
						:src="showPassword1 ? '/static/images/home/eye_icon.png' : '/static/images/home/eye-open.png'"
						style="width: 18px;height: 18px;"></image>
				</view>
			</view>
			<view class="xieyi_box">
				<label @click="userAgreeChange" class="radio">
					<radio :checked="userAgreement" color="#185AFF" style="transform: scale(0.68);" /><text class="txt1">我已阅读并同意</text>
				</label>
				<text class="qieyi" @click="openDoc('智初小交云平台用户服务条款')">《智初小交云平台用户服务条款》</text>
				<text class="qieyi" @click="openDoc('隐私政策')">《隐私政策》</text>

			</view>
			<view class="reg_box" v-if="registerType == 'register'">
				<button type="primary" class="btn_pri" :disabled="!userAgreement" style="background-color: #477EDA;"
					@click="registerBtn">注册</button>
			</view>
			<view class="reg_box" v-else>
				<button type="primary" class="btn_pri" :disabled="!userAgreement" style="background-color: #477EDA;"
					@click="_appWxLoginBind">提交绑定</button>
			</view>
			<view class="txt_box" v-if="registerType == 'register'">
				<text class='txt_txt' @click="jumpLogin">已有帐号去登录</text>
			</view>
		</view>
		<mcModal :isShow="showMcModal" :content="content" :showCancel="showCancel" :title="title" @cancel='bb()'
			:inp="false" @ok='cc()' :okBtn='okBtn'></mcModal>
		<tmcModal :isShow="showMcModal1" :content="content1" :showCancel="false" :title="title1" @ok='queren'>
		</tmcModal>
	</view>
</template>

<script>
	import {
		sendSmsCode,
		register,
		appWxLoginBind
	} from '../../common/api/index.js';
	import {
		_showLoading,
		_showToast
	} from '../../common/js/util.js'
	import {
		requestURL
	} from '../../common/utils/config.js'
	import mcModal from '../../components/custom-modal/custom-modal.vue'
	import tmcModal from '../../components/custom-modal/mc-modal.vue'
	export default {
		data() {
			return {
				requestURL: requestURL,
				params: {
					mobileNo: '',
					pwd: '',
					rePwd: '',
					smsCode: ''
				},
				userAgreement: false,
				selectBox: true,
				numberCode: 60,
				disabled: false,
				countdown: '获取验证码',
				timestatus: false,
				showPassword: false,
				showPassword1: false,
				registerType: 'register',
				unionid: '',
				content: '',
				title: '',
				showMcModal: false,
				showCancel: true,
				content1: '',
				title1: '',
				showMcModal1: false,
				okBtn: '',
				isSwitch: ''
			}
		},
		components: {
			mcModal,
			tmcModal
		},
		onLoad(option) {
			this.registerType = option.type
			this.unionid = option.unionid
			if (this.registerType == 'appLogin') {
				uni.setNavigationBarTitle({
					title: '绑定手机'
				});
			}
		},
		methods: {
			bb() {
				this.showMcModal = false
			},
			cc() {
				this.showMcModal = false
				this.showCancel = true
				if (this.isSwitch == 'register') {
					uni.reLaunch({
						url: '/pages/login/login'
					})
				} else if (this.isSwitch == 'bind') {
					uni.switchTab({
						url: '/pages/home/home'
					})
				} else if (this.isSwitch == '') {
					this.params.mobileNo = ''
				}
			},
			queren() {
				this.showMcModal1 = false
			},
			showTxt(title, content) {
				this.title1 = title
				this.content1 = content
				this.showMcModal1 = true
			},
			openDoc(name) {
				/* var that = this;
				var filePath = `${requestURL}/stu_side_h5/user_agreement.docx`;//对应的网络路径，可以是内网的或者外网
				console.log(filePath)
				wx.downloadFile({//下载对应文件
				  url: filePath,
				  success: function (res) {
					var filePaths = res.tempFilePath;//文件路径
					console.log(filePaths)
					wx.openDocument({
					  filePath: filePaths,//装载对应文件的路径
					  fileType: 'docx',//指定打开的文件类型
					  success: function (res) {
						console.log("打开成功");
					  },
					  fail: function (res) {
						console.log(res);
					  }
					})
			
				  },
				  fail: function (res) {
					console.log(res);
				  }
				}) */
				let url = '';
				if (name == '智初小交云平台用户服务条款') {
					url = '/stu_side_h5/xj/user_agreement.html' + '&title=' + '用户服务条款'
				} else if (name == '隐私政策') {
					url = '/stu_side_h5/xj/privacy_policy.html' + '&title=' + '隐私政策'
				}
				uni.navigateTo({
					url: './userAgreement?url=' + url
				})
			},
			changeBox() {
				this.selectBox = !this.selectBox
			},
			showPass() {
				this.showPassword = !this.showPassword;
			},
			showPass1() {
				this.showPassword1 = !this.showPassword1;
			},
			registerBtn() {
				if (this.params.mobileNo == '') {
					this.showTxt('温馨提示', '请填写手机号')
				} else if (this.params.smsCode == '') {
					this.showTxt('温馨提示', '请填写验证码')
				} else if (this.params.pwd == '') {
					this.showTxt('温馨提示', '请填写登录密码')
				} else if (this.params.rePwd == '') {
					this.showTxt('温馨提示', '请填写确认密码')
				} else if (this.params.pwd != this.params.rePwd) {
					this.showTxt('温馨提示', '两次输入的密码不一致')
				} else {
					if (this.selectBox) {
						_showLoading('注册中,请稍后…')
						register({
							mobileNo: this.params.mobileNo,
							password: this.params.pwd,
							smsCode: this.params.smsCode
						}).then(res => {
							if (res.resultCode == 0) {
								uni.hideLoading()
								this.title = '温馨提示'
								this.content = '注册成功！'
								this.okBtn = '去登陆'
								this.isSwitch = 'register'
								this.showMcModal = true
							} else {
								uni.hideLoading()
								this.showTxt('注册失败', res.resultMsg)
							}
						}).catch(err => {
							this.showTxt('注册失败', '系统错误!')
						})
					} else {
						_showToast('请勾选协议')
					}
				}
			},
			_appWxLoginBind() {
				if (this.params.mobileNo == '') {
					this.showTxt('注册失败', '请填写手机号')
				} else if (this.params.smsCode == '') {
					this.showTxt('注册失败', '请填写验证码')
				} else {
					if (this.selectBox) {
						_showLoading('绑定中,请稍后…')
						appWxLoginBind({
							mobileNo: this.params.mobileNo,
							unionid: this.unionid,
							smsCode: this.params.smsCode
						}).then(res => {
							if (res.resultCode == 0) {
								uni.hideLoading()
								uni.setStorageSync('s_userId', res.userId)
								uni.setStorageSync('s_login', true)
								uni.setStorageSync('s_mobile', this.params.mobileNo)
								this.title = '提示'
								this.content = '绑定成功！'
								this.okBtn = '立即体验'
								this.isSwitch = 'bind'
								this.showMcModal = true
								this.showCancel = false
							} else {
								uni.hideLoading()
								this.showTxt('绑定失败', res.resultMsg)
							}
						}).catch(err => {
							this.showTxt('温馨提示', '系统错误!')
						})
					} else {
						_showToast('请勾选协议')
					}
				}
			},
			jumpLogin() {
				uni.navigateBack({
					delta: 1
				})
			},
			getCode() {
				var that = this;
				if (that.disabled == true) return
				if (that.params.mobileNo == '') {
					_showToast('请输入手机号码')
				} else {
					uni.showLoading();
					that.disabled = true;
					sendSmsCode({
						mobileNo: this.params.mobileNo
					}).then(res => {
						if (res.resultCode == 0) {
							uni.hideLoading()
							_showToast('获取验证码成功')
							that.countdown = 60;
							that.timestatus = true;
							that.clear = setInterval(that.countDown, 1000);
						} else {
							uni.hideLoading()
							_showToast('获取验证码失败')
							that.disabled = false;
						}
					}).catch(err => {
						this.showTxt('温馨提示', '系统错误!')
						that.disabled = false;
					})
				}
			},
			countDown() {
				var that = this;
				if (!that.countdown) {
					that.disabled = false;
					that.timestatus = false;
					that.countdown = '获取验证码';
					clearInterval(that.clear);
				} else {
					--that.countdown;
				}
			},
			checkNo(str) {
				let reg = /^1(3|4|5|6|7|8|9)\d{9}$/;
				if (reg.test(str)) {
					console.log('手机号码格式输入正确');
					return true;
				} else {
					this.title = '操作失误'
					this.content = '请输入正确格式的手机号码'
					this.okBtn = '重新输入'
					this.isSwitch = ''
					this.showMcModal = true
					return false;
				}
			},
			userAgreeChange() {
				this.userAgreement = !this.userAgreement
			}
		}
	}
</script>

<style lang="scss">
	.bg_login {
		width: 100vw;
		/* #ifndef MP-WEIXIN*/
		height: calc(100vh - 50px);
		/* #endif */
		/* #ifdef MP-WEIXIN*/
		height: 100vh;
		/* #endif */
		overflow: hidden;
		position: relative;
	}

	.txt1 {
		font-size: 24rpx;
		font-family: "PingFang-SC-Medium, PingFang-SC";
		font-weight: 500;
		color: #999999;
	}

	.btn_pri {
		margin-top: 60rpx;
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		width: 90%;
		font-size: 34rpx;
		font-family: "PingFangSC-Heavy, PingFang SC";
		font-weight: 600;
		color: #FFFFFF;
		background: linear-gradient(90deg, #0685FF 0%, #285EFF 100%);
		box-shadow: 0px 8px 16px 0px rgba(36, 98, 255, 0.24);
		border-radius: 8rpx;
	}

	.bg_img {
		width: 100%;
		height: 550rpx;
	}

	.form_txt {
		width: 150rpx;
	}

	.txt_txt {
		font-size: 28rpx;
		font-family: "PingFang-SC-Medium, PingFang-SC";
		font-weight: 500;
		color: #185AFF;
	}

	.account-txt {
		font-size: 28rpx;
		font-family: "PingFangSC-Medium, PingFang SC";
		font-weight: 500;
		color: #ADADAD;
	}

	.txt_box {
		display: flex;
		flex-direction: row;
		justify-content: flex-end;
		align-items: center;
		margin-top: 40rpx;
		padding: 0 30rpx;
	}

	.login_txt {
		font-size: 42rpx;
		font-family: "PingFangSC-Heavy, PingFang SC";
		font-weight: 800;
		color: #333333;
		margin-top: 20rpx;
	}

	.img_box {
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.form_box {
		display: flex;
		flex-direction: row;
		// justify-content: space-between;
		align-items: center;
		height: 84rpx;
		padding: 0 20rpx;
		margin-bottom: 30rpx;
		background: #FFFFFF;
		border-radius: 8rpx;
		border: 1px solid #E6E6E6;
	}

	.pwd-view {
		flex: 1;
		font-size: 24rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.hh_cicle {
		position: absolute;
		top: 6%;
		left: 10%;
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
	}

	.login_box {
		width: 80%;
		position: absolute;
		top: 30%;
		left: 10%;
	}

	.uni-input {
		flex: 1;
		padding: 10rpx;
	}

	.mobile {
		width: 230rpx;
	}

	.hc_img {
		width: 140rpx;
		height: 150rpx;
	}

	.register_yzm {
		flex: 1;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}

	.register_yzms {
		color: #185AFF;
		font-family: 'Arial Normal', 'Arial';
		font-weight: 500;
		font-size: 24rpx;
		text-align: center;
		height: 70rpx;
		line-height: 75rpx;

		// padding-left: 20rpx;
		&.disabled {
			color: #999;
		}
	}

	.img_size {
		width: 24px;
		height: 24px;
	}

	.xieyi_box {
		// display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
	}

	.x_box_img {
		width: 12px;
		height: 12px;
		margin-right: 10rpx;
	}

	.input_yzm {
		// width: 190rpx;
		padding: 10rpx;
	}

	.yzm {
		width: 190rpx;
		height: 50rpx;
	}

	.reg_box {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 100%;
	}

	.qieyi {
		@extend .txt1;
		color: #185AFF;
		text-decoration: blink
	}
</style>
